﻿@(Html.Kendo()
    .Grid<TelerikedIn.WebApp.ViewModels.Skills.SkillVM>()
    .Name("skills-list")
    .Columns(col =>
    {
        col.Bound(m => m.Name).Title("Skill");
        col.Bound(m => m.EndorsmentsCount).Title("Endorsements").Width(50);
        col.Command(com =>
        {
            com.Destroy().Text("del");
        }).Width(50);
    })
    .Pageable(p =>
    {
        p.Enabled(true);
        p.Refresh(true);
        p.Info(true);
    })
    .Sortable()
    .DataSource(data =>
    {
        data.Ajax()
            .Model(m => m.Id("Id"))
            .PageSize(10)
            .Read(r => r.Action("Read", "UserSkills", new { userId = ViewData["userId"] }))
            .Destroy(r => r.Action("Delete", "UserSkills", new { userId = ViewData["userId"] }));
    })
    .ClientDetailTemplateId("skill-details")
)
<div class="row-fluid">

    @using (Ajax.BeginForm("AddSkill", new { userId = ViewData["userId"] },
    new AjaxOptions
    {
        UpdateTargetId = "add-skill-result",
        HttpMethod = "Post",
        OnSuccess = "updateSkills"
    }))
    {
        @Html.AntiForgeryToken()

        @(Html.Kendo()
            .AutoComplete()
            .Name("newSkillName")
            .HtmlAttributes(new { name = "newSkillName", maxLength = 100 })
            .MinLength(1)            
            .DataTextField("Name")
            .Filter(FilterType.Contains)
            .DataSource(d =>
            {
                d.Read(r => 
                {
                    r.Action("GetSkillsNotYetAcquired", "UserSkills", new { userId = ViewData["userId"] });                
                    r.Data("onAdditionalData");
                });                
                d.ServerFiltering(true);
            })
        )

        <input type="submit" value="Add Skill" class="btn 
                btn-success" />
    }
    <div id="add-skill-result"></div>
</div>

<script>
    function onAdditionalData() {
        return {
            text: $('#newSkillName').val(),
        }
    }

    function updateSkills(e) {        
        var kendoGrid = $("#skills-list").data("kendo-grid");
        kendoGrid.dataSource.read();
    }

    function detailsExpanded(data, request, error) {
        debugger;
    }

</script>

<script type="text/x-kendo-template" id="skill-details">
    <span class="label">Endorsed by:</span>
    @(Html.Kendo()
        .ListView<TelerikedIn.WebApp.ViewModels.Endorsments.EndorsmentsVM>()
        .Name("#=Id#")
        .TagName("ul")
        .ClientTemplateId("details-list-template")
        .DataSource(d =>
        {
            d.Read(r => r.Action("GetEndorsmentDetails", "UserSkills", new { area = "", skillId = "#=Id#" }));
        })
        .HtmlAttributes(new { @class = "unstyled inline" })
        .ToClientTemplate()
    )
</script>

<script type="text/x-kendo-template" id="details-list-template">
    <li>  
        <a href="../Profile/UserDetails/#:ByUserId#"
           title="#: ByUserName #">
            <img src="#: Image #" width="25" />
        </a>
    </li>
</script>
